<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>


    <link rel="stylesheet" href="../../../../css/frozenui.css">
    <link rel="stylesheet" href="../../../css/style.css">


</head>

<body ontouchstart>
<section class="ui-container">

    <section id="form">
        <div class="demo-item">
            <p class="demo-desc">ui-icon 图标</p>
            <div class="demo-block">
                <ul class="icon-lists clear">

                    <li>
                        <i class="ui-icon-add"></i>
                        <div class="code">&amp;#xf615;</div>
                        <div class="fontclass">.ui-icon-add</div>
                    </li>

                    <li>
                        <i class="ui-icon-more"></i>
                        <div class="code">&amp;#xf616;</div>
                        <div class="fontclass">.ui-icon-more</div>
                    </li>

                    <li>
                        <i class="ui-icon-arrow"></i>
                        <div class="code">&amp;#xf600;</div>
                        <div class="fontclass">.ui-icon-arrow</div>
                    </li>

                    <li>
                        <i class="ui-icon-return"></i>
                        <div class="code">&amp;#xf614;</div>
                        <div class="fontclass">.ui-icon-return</div>
                    </li>

                    <li>
                        <i class="ui-icon-checked"></i>
                        <div class="code">&amp;#xf601;</div>
                        <div class="fontclass">.ui-icon-checked</div>
                    </li>

                    <li>
                        <i class="ui-icon-checked-s"></i>
                        <div class="code">&amp;#xf602;</div>
                        <div class="fontclass">.ui-icon-checked-s</div>
                    </li>

                    <li>
                        <i class="ui-icon-info-block"></i>
                        <div class="code">&amp;#xf603;</div>
                        <div class="fontclass">.ui-icon-info-block</div>
                    </li>

                    <li>
                        <i class="ui-icon-success-block"></i>
                        <div class="code">&amp;#xf604;</div>
                        <div class="fontclass">.ui-icon-success-block</div>
                    </li>

                    <li>
                        <i class="ui-icon-warn-block"></i>
                        <div class="code">&amp;#xf605;</div>
                        <div class="fontclass">.ui-icon-warn-block</div>
                    </li>

                    <li>
                        <i class="ui-icon-info"></i>
                        <div class="code">&amp;#xf606;</div>
                        <div class="fontclass">.ui-icon-info</div>
                    </li>

                    <li>
                        <i class="ui-icon-success"></i>
                        <div class="code">&amp;#xf607;</div>
                        <div class="fontclass">.ui-icon-success</div>
                    </li>

                    <li>
                        <i class="ui-icon-warn"></i>
                        <div class="code">&amp;#xf608;</div>
                        <div class="fontclass">.ui-icon-warn</div>
                    </li>

                    <li>
                        <i class="ui-icon-next"></i>
                        <div class="code">&amp;#xf617;</div>
                        <div class="fontclass">.ui-icon-next</div>
                    </li>

                    <li>
                        <i class="ui-icon-prev"></i>
                        <div class="code">&amp;#xf618;</div>
                        <div class="fontclass">.ui-icon-prev</div>
                    </li>

                    <li>
                        <i class="ui-icon-tag"></i>
                        <div class="code">&amp;#xf60d;</div>
                        <div class="fontclass">.ui-icon-tag</div>
                    </li>

                    <li>
                        <i class="ui-icon-tag-pop"></i>
                        <div class="code">&amp;#xf60f;</div>
                        <div class="fontclass">.ui-icon-tag-pop</div>
                    </li>

                    <li>
                        <i class="ui-icon-tag-s"></i>
                        <div class="code">&amp;#xf60e;</div>
                        <div class="fontclass">.ui-icon-tag-s</div>
                    </li>

                    <li>
                        <i class="ui-icon-warn-lg"></i>
                        <div class="code">&amp;#xf609;</div>
                        <div class="fontclass">.ui-icon-warn-lg</div>
                    </li>

                    <li>
                        <i class="ui-icon-close"></i>
                        <div class="code">&amp;#xf60a;</div>
                        <div class="fontclass">.ui-icon-close</div>
                    </li>

                    <li>
                        <i class="ui-icon-close-progress"></i>
                        <div class="code">&amp;#xf619;</div>
                        <div class="fontclass">.ui-icon-close-progress</div>
                    </li>

                    <li>
                        <i class="ui-icon-close-page"></i>
                        <div class="code">&amp;#xf60b;</div>
                        <div class="fontclass">.ui-icon-close-page</div>
                    </li>

                    <li>
                        <i class="ui-icon-emo"></i>
                        <div class="code">&amp;#xf61a;</div>
                        <div class="fontclass">.ui-icon-emo</div>
                    </li>

                    <li>
                        <i class="ui-icon-delete"></i>
                        <div class="code">&amp;#xf61b;</div>
                        <div class="fontclass">.ui-icon-delete</div>
                    </li>

                    <li>
                        <i class="ui-icon-search"></i>
                        <div class="code">&amp;#xf60c;</div>
                        <div class="fontclass">.ui-icon-search</div>
                    </li>

                    <li>
                        <i class="ui-icon-order"></i>
                        <div class="code">&amp;#xf61c;</div>
                        <div class="fontclass">.ui-icon-order</div>
                    </li>

                    <li>
                        <i class="ui-icon-news"></i>
                        <div class="code">&amp;#xf61d;</div>
                        <div class="fontclass">.ui-icon-news</div>
                    </li>

                    <li>
                        <i class="ui-icon-personal"></i>
                        <div class="code">&amp;#xf61e;</div>
                        <div class="fontclass">.ui-icon-personal</div>
                    </li>

                    <li>
                        <i class="ui-icon-dressup"></i>
                        <div class="code">&amp;#xf61f;</div>
                        <div class="fontclass">.ui-icon-dressup</div>
                    </li>

                    <li>
                        <i class="ui-icon-cart"></i>
                        <div class="code">&amp;#xf620;</div>
                        <div class="fontclass">.ui-icon-cart</div>
                    </li>

                    <li>
                        <i class="ui-icon-history"></i>
                        <div class="code">&amp;#xf621;</div>
                        <div class="fontclass">.ui-icon-history</div>
                    </li>

                    <li>
                        <i class="ui-icon-wallet"></i>
                        <div class="code">&amp;#xf622;</div>
                        <div class="fontclass">.ui-icon-wallet</div>
                    </li>

                    <li>
                        <i class="ui-icon-refresh"></i>
                        <div class="code">&amp;#xf623;</div>
                        <div class="fontclass">.ui-icon-refresh</div>
                    </li>

                    <li>
                        <i class="ui-icon-thumb"></i>
                        <div class="code">&amp;#xf624;</div>
                        <div class="fontclass">.ui-icon-thumb</div>
                    </li>

                    <li>
                        <i class="ui-icon-file"></i>
                        <div class="code">&amp;#xf625;</div>
                        <div class="fontclass">.ui-icon-file</div>
                    </li>

                    <li>
                        <i class="ui-icon-hall"></i>
                        <div class="code">&amp;#xf626;</div>
                        <div class="fontclass">.ui-icon-hall</div>
                    </li>

                    <li>
                        <i class="ui-icon-voice"></i>
                        <div class="code">&amp;#xf627;</div>
                        <div class="fontclass">.ui-icon-voice</div>
                    </li>

                    <li>
                        <i class="ui-icon-unfold"></i>
                        <div class="code">&amp;#xf628;</div>
                        <div class="fontclass">.ui-icon-unfold</div>
                    </li>

                    <li>
                        <i class="ui-icon-gototop"></i>
                        <div class="code">&amp;#xf629;</div>
                        <div class="fontclass">.ui-icon-gototop</div>
                    </li>

                    <li>
                        <i class="ui-icon-share"></i>
                        <div class="code">&amp;#xf62a;</div>
                        <div class="fontclass">.ui-icon-share</div>
                    </li>

                    <li>
                        <i class="ui-icon-home"></i>
                        <div class="code">&amp;#xf62b;</div>
                        <div class="fontclass">.ui-icon-home</div>
                    </li>

                    <li>
                        <i class="ui-icon-pin"></i>
                        <div class="code">&amp;#xf62c;</div>
                        <div class="fontclass">.ui-icon-pin</div>
                    </li>

                    <li>
                        <i class="ui-icon-star"></i>
                        <div class="code">&amp;#xf62d;</div>
                        <div class="fontclass">.ui-icon-star</div>
                    </li>

                    <li>
                        <i class="ui-icon-bugle"></i>
                        <div class="code">&amp;#xf62e;</div>
                        <div class="fontclass">.ui-icon-bugle</div>
                    </li>

                    <li>
                        <i class="ui-icon-trend"></i>
                        <div class="code">&amp;#xf62f;</div>
                        <div class="fontclass">.ui-icon-trend</div>
                    </li>

                    <li>
                        <i class="ui-icon-unchecked"></i>
                        <div class="code">&amp;#xf610;</div>
                        <div class="fontclass">.ui-icon-unchecked</div>
                    </li>

                    <li>
                        <i class="ui-icon-unchecked-s"></i>
                        <div class="code">&amp;#xf611;</div>
                        <div class="fontclass">.ui-icon-unchecked-s</div>
                    </li>

                    <li>
                        <i class="ui-icon-play-active"></i>
                        <div class="code">&amp;#xf630;</div>
                        <div class="fontclass">.ui-icon-play-active</div>
                    </li>

                    <li>
                        <i class="ui-icon-stop-active"></i>
                        <div class="code">&amp;#xf631;</div>
                        <div class="fontclass">.ui-icon-stop-active</div>
                    </li>

                    <li>
                        <i class="ui-icon-play"></i>
                        <div class="code">&amp;#xf632;</div>
                        <div class="fontclass">.ui-icon-play</div>
                    </li>

                    <li>
                        <i class="ui-icon-stop"></i>
                        <div class="code">&amp;#xf633;</div>
                        <div class="fontclass">.ui-icon-stop</div>
                    </li>

                    <li>
                        <i class="ui-icon-set"></i>
                        <div class="code">&amp;#xf634;</div>
                        <div class="fontclass">.ui-icon-set</div>
                    </li>

                    <li>
                        <i class="ui-icon-add-group"></i>
                        <div class="code">&amp;#xf635;</div>
                        <div class="fontclass">.ui-icon-add-group</div>
                    </li>

                    <li>
                        <i class="ui-icon-add-people"></i>
                        <div class="code">&amp;#xf636;</div>
                        <div class="fontclass">.ui-icon-add-people</div>
                    </li>

                    <li>
                        <i class="ui-icon-pc"></i>
                        <div class="code">&amp;#xf637;</div>
                        <div class="fontclass">.ui-icon-pc</div>
                    </li>

                    <li>
                        <i class="ui-icon-scan"></i>
                        <div class="code">&amp;#xf638;</div>
                        <div class="fontclass">.ui-icon-scan</div>
                    </li>

                    <li>
                        <i class="ui-icon-tag-svip"></i>
                        <div class="code">&amp;#xf613;</div>
                        <div class="fontclass">.ui-icon-tag-svip</div>
                    </li>

                    <li>
                        <i class="ui-icon-tag-vip"></i>
                        <div class="code">&amp;#xf612;</div>
                        <div class="fontclass">.ui-icon-tag-vip</div>
                    </li>

                    <li>
                        <i class="ui-icon-male"></i>
                        <div class="code">&amp;#xf639;</div>
                        <div class="fontclass">.ui-icon-male</div>
                    </li>

                    <li>
                        <i class="ui-icon-female"></i>
                        <div class="code">&amp;#xf63a;</div>
                        <div class="fontclass">.ui-icon-female</div>
                    </li>

                    <li>
                        <i class="ui-icon-collect"></i>
                        <div class="code">&amp;#xf63b;</div>
                        <div class="fontclass">.ui-icon-collect</div>
                    </li>

                    <li>
                        <i class="ui-icon-commented"></i>
                        <div class="code">&amp;#xf63c;</div>
                        <div class="fontclass">.ui-icon-commented</div>
                    </li>

                    <li>
                        <i class="ui-icon-like"></i>
                        <div class="code">&amp;#xf63d;</div>
                        <div class="fontclass">.ui-icon-like</div>
                    </li>

                    <li>
                        <i class="ui-icon-liked"></i>
                        <div class="code">&amp;#xf63e;</div>
                        <div class="fontclass">.ui-icon-liked</div>
                    </li>

                    <li>
                        <i class="ui-icon-comment"></i>
                        <div class="code">&amp;#xf63f;</div>
                        <div class="fontclass">.ui-icon-comment</div>
                    </li>

                    <li>
                        <i class="ui-icon-collected"></i>
                        <div class="code">&amp;#xf640;</div>
                        <div class="fontclass">.ui-icon-collected</div>
                    </li>

                </ul>

            </div>
    </section>

</section>

<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script>
    var _mtac = {};
    (function () {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>


<script src="../../../js/lib/zepto.min.js"></script>
<script src="../../../js/index.js"></script>


</body>
</html>
